<template>
  <div class="overflow-y-scroll flex flex-col" style="border-left: 1px solid var(--border)">
    <!-- 群公告 -->
    <div v-if="IsOwner" class="py-2" style="border-bottom: 1px solid var(--border)">
      <div class="flex flex-row justify-between items-center p-2">
        <span>群公告</span>
        <Plus style="width: 1em; height: 1em; cursor: pointer" @click="showNoticeModal = true" />
      </div>
    </div>
    <!-- 群成员 -->
    <div class="p-1">
      <!-- 成员搜索 -->
      <div v-if="!isSearchMember" class="flex flex-row justify-between items-center p-2">
        <span class="text-base">群成员 {{ FilteredMembers?.length }}</span>
        <Search style="width: 1em; height: 1em; cursor: pointer" @click="isSearchMember = true" />
      </div>
      <n-input
        v-else
        v-model:value="searchKeyWord"
        :autofocus="true"
        placeholder="搜索"
        size="small"
        type="text"
        @blur="() => (isSearchMember = false)"
      >
        <template #prefix>
          <Search style="width: 1em; height: 1em; cursor: pointer" />
        </template>
      </n-input>

      <!-- 群员列表 -->
      <template v-if="FilteredMembers.length != 0">
        <ContextMenu
          v-for="(item, index) in FilteredMembers"
          :key="index"
          :content="item"
          :menu-list="ChatGroupMemberMenu"
          class="flex flex-row justify-between items-center gap-2 hover:bg-RightListHover p-2 cursor-pointer"
          @select="(event, MenuItem) => MenuItem.click(event, item)"
        >
          <n-popover
            :show-arrow="false"
            placement="left-start"
            style="padding: 0 0 10px 0; background-color: var(--bg-center); width: 280px"
            trigger="click"
          >
            <template #trigger>
              <div class="w-full flex flex-row justify-between items-center">
                <div class="flex flex-row justify-center items-center gap-2">
                  <n-avatar :size="32" :src="item.avatar" />
                  <div class="text-fontPlaceholde">{{ item.name }}</div>
                </div>
                <n-tag v-if="item.role != 0" size="small" type="warning"> 群主 </n-tag>
              </div>
            </template>
            <PopoverInfo :userInfo="item" />
          </n-popover>
        </ContextMenu>
      </template>
      <template v-else>
        <MessageMemberListSkeleton />
      </template>
    </div>
  </div>
  <!-- 群公告弹窗 -->
  <n-modal v-model:show="showNoticeModal" draggable>
    <n-card
      :bordered="false"
      aria-modal="true"
      role="dialog"
      size="huge"
      style="width: 450px; height: 400px; padding: 10px"
    >
      <template #header>
        <p class="text-xs text-fontPrimary text-center p-2 font-semibold">发送新公告</p>
      </template>
      <textarea autofocus class="textAre" placeholder="请填写公告"></textarea>
      <template #footer>
        <div class="text-end pt-2">
          <el-button size="small" @click="showNoticeModal = false">取消 </el-button>
          <el-button size="small" type="primary" @click="showNoticeModal = false">发布 </el-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import { GroupRole, IGroupMemberInfo } from "@/types/group.ts";
import { useUser } from "@/store/modules/user.ts";
import { useChat } from "@/store/modules/chat.ts";
import { useCache } from "@/store/modules/cache.ts";
import { useMitt } from "@/hooks/useMitt.ts";
import { useChatMenu } from "@/hooks/useMenu.ts";
import { Plus, Search } from "@element-plus/icons-vue";
import { NAvatar, NCard, NInput, NModal, NPopover, NTag } from "naive-ui";
import ContextMenu from "@/components/ContextMenu/index.vue";
import MessageMemberListSkeleton from "@/skeleton/MessageMemberList/index.vue";
import PopoverInfo from "@/components/PopoverInfo/index.vue";

const user = useUser();
const chat = useChat();
const cache = useCache();
const { ChatGroupMemberMenu } = useChatMenu();
const { ChatObject } = storeToRefs(chat);
const showNoticeModal = ref(false);
const isSearchMember = ref(false);
const searchKeyWord = ref("");

// 群成员
const FilteredMembers = computed<IGroupMemberInfo[]>(() => {
  if (!ChatObject.value?.id) return [];
  const members = cache.GroupMemberCache.get(ChatObject.value.id) ?? [];
  if (!members.length || !searchKeyWord.value.trim()) return members;
  const keyword = searchKeyWord.value.trim().toLowerCase();
  return members.filter((member) => member.name.toLowerCase().includes(keyword));
});

// 判断是不是群主
const IsOwner = computed(() => {
  if (!ChatObject.value?.id) return false;
  const members = cache.GroupMemberCache.get(ChatObject.value.id) ?? [];
  if (!members) return false;
  let owner = members.find((item) => item.role == GroupRole.owner);
  return user.userId === owner?.id;
});

useMitt.on("showPopover", () => {
  // todo
  // ShowPopover.value = true;
});
</script>

<style lang="scss" scoped>
.textAre {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 10px;
  resize: none;
  background-color: var(--bg-center) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
</style>
